<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>CustomWelcome</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="index" class="big_box">
    <h1 class="tittle">欢迎使用学生信息管理系统</h1>
    <div class="login_box">
        <h2>注册</h2>
        <el-form :label-position="labelPosition" :model="register_form" status-icon :rules="rules" ref="register_form" class="demo-register_form">
            <el-form-item label="账号" prop="username">
                <el-input v-model.number="register_form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="register_form.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="register_form.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model.number="register_form.email"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('register_form')">提交</el-button>
                <el-button @click="resetForm('register_form')">重置</el-button>
            </el-form-item>
            <el-row>

                <el-button type="primary" icon="el-icon-back" circle @click="go_login"></el-button>

            </el-row>
        </el-form>
    </div>
</div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#index',
        data: function() {
            var checkusername = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('账号不能为空'));
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.register_form.checkPass !== '') {
                        this.$refs.register_form.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.register_form.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                sys_name:"岚精灵",
                register_form: {
                    pass: '',
                    checkPass: '',
                    username: '',
                    email:""
                },
                labelPosition: 'left',
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    username: [
                        { validator: checkusername, trigger: 'blur' }
                    ]
                }
            }

        },
        methods: {
            submitForm() {
                if (this.register_form.pass === "" || this.register_form.checkPass === "" || this.register_form.username === "" || this.register_form.pass !== this.register_form.checkPass){
                    this.$message.error("请检查输入的信息！！！");
                }else {
                    const params = new URLSearchParams();
                    params.append('username', this.register_form.username);
                    params.append('password', this.register_form.pass);

                    // 发送POST请求
                    fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/registerUser', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: params // URLSearchParams对象会自动转换为URL编码的字符串
                    })
                        .then(response => {
                            if (response.ok) {
                                return response.text(); // 或者 response.json() 如果响应是JSON格式
                            }
                            throw new Error('Network response was not ok.');
                        })
                        .then(data => {
                            console.log(data)
                            if (data === "1"){
                                this.$message.success("注册成功！！");
                                setTimeout(() => {
                                    window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/';
                                }, 300); // 1000毫秒等于1秒
                            }else {
                                this.$message.error("注册失败！！");
                                setTimeout(() => {
                                    window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/register';
                                }, 300); // 1000毫秒等于1秒
                            }

                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error("注册失败！");
                        });
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            go_login(){
                setTimeout(() => {
                    window.location.href = 'http://localhost:8080/Spring_MVC_class9_war_exploded/';
                }, 350);
            }

        },
        created() {

        }
    })
</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background-color: wheat;
    }
    .big_box{
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .tittle{
        margin-top: 60px;
        font-size: 55px;
        color: white;
        margin-bottom: 130px;
    }
    .login_box{
        width: 30%;
        background-color: #ffffff;
        text-align: center;
        margin: 0 auto;
        padding: 20px;
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
</html>
